<template>
  <div class="x-data-list">
    <x-data-pages-list v-if="['pages', 'group'].includes(type)" v-bind="props" />
    <x-data-coupon-list v-if="['coupon'].includes(type)" v-bind="props" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, computed } from 'vue'
  import XDataPagesList from './x-data-pages-list.vue'
  import XDataCouponList from './x-data-coupon-list.vue'

  export default defineComponent({
    name: 'XDataList',
    components: {
      XDataPagesList,
      XDataCouponList
    },
    props: {
      type: {
        type: String,
        default: 'pages'
      },
      // ids串
      ids: {
        type: Array,
        default: () => null
      },
      // list数据
      list: {
        type: Array,
        default: () => null
      },
      // api地址
      api: {
        type: String,
        default: null
      },
      // 接口请求额外参数
      formData: {
        type: Object,
        default: () => null
      },
      // 需要展示的列
      columns: {
        type: Array,
        default: () => null
      },
      // 前缀列
      prefix: {
        type: Array,
        default: () => null
      },
      // 后缀列
      suffix: {
        type: Array,
        default: () => null
      }
    },
    setup($props) {
      const $state = reactive({
        props: computed(() => {
          const props = {}
          for (const key in $props) {
            if ($props[key] && !['type'].includes(key)) {
              props[key] = $props[key]
            }
          }
          // 微页面与聚合页单独处理
          if ($props.type === 'group') {
            if (props.formData) {
              Object.assign(props.formData, {
                type: 3
              })
            } else {
              props.formData = {
                type: 3
              }
            }
          }
          return props
        })
      })

      return {
        ...toRefs($state)
      }
    }
  })
</script>

<style></style>
